/* H5的编辑页面
 * H5Edit.jsx
 */
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';

import {Map} from 'immutable';

import LeftTabs from './LeftTabs.jsx';
import RightTabs from './rightSection';
import MiddleEditZone from './MiddleEditZone.jsx';

import {addNewPage,clickLeftPage} from '../../actions/h5/PageAction';
import {getInitPageData,saveAllDatas} from '../../actions/h5/H5Action';
import {deleteComp,upCompSurface} from '../../actions/h5/ComponentAction';

import '../../static/css/h5edit.css';

class H5Edit extends Component{
	constructor(props){
		super(props);
		this.state={
			activePageId:this.props.activePageId,
			selComp:Map(),
			selectStyle:{display:'none'}
		};
		this.autoSaveEvent=null;
	}

	componentWillUnmount(){
		if(this.autoSaveEvent){//离开页面时清除该自动保存事件
			clearInterval(this.autoSaveEvent);
		}
	}

	componentDidMount(){
		this.props.dispatch(getInitPageData(this.props.params.uniqueCode));
		if(__PROD__){//生产环境时，自动保存每分钟执行一次
			this.autoSaveEvent=setInterval(function(){
				if(this.props.saveDatas.id && this.props.saveDatas.contentEdit){
					console.log('自动保存数据');
					this.props.dispatch(saveAllDatas(this.props.saveDatas));
				}
			}.bind(this),1000*60);
		}
		/*设置键盘事件*/
		document.onkeydown=function(e){
			var ev = e || window.event;//获取event对象
			if(!this.state.selComp.get('id')) return;

			const compId=this.state.selComp.get('id');
			const surface=this.state.selComp.get('surface');
			const x=parseInt(this.state.selComp.get('surface').get('x'));
			const y=parseInt(this.state.selComp.get('surface').get('y'));

			switch(ev.keyCode){
				case 46://删除操作
					this.hiddenSelComp();
					this.props.dispatch(deleteComp(this.props.activePageId,compId));
					return false;
				case 37://左
					ev.preventDefault()|| ev.stopPropagation();
					this.props.dispatch(upCompSurface(this.props.activePageId,compId,{x:x-1}));
					this.setSelectCompPos(x-1,y);
					return false;
				case 38://上
					ev.preventDefault()|| ev.stopPropagation();
					this.props.dispatch(upCompSurface(this.props.activePageId,compId,{y:y-1}));
					this.setSelectCompPos(x,y-1);
					return false;
				case 39://右
					ev.preventDefault()|| ev.stopPropagation();
					this.props.dispatch(upCompSurface(this.props.activePageId,compId,{x:x+1}));
					this.setSelectCompPos(x+1,y);
					return false;
				case 40://下
					ev.preventDefault()|| ev.stopPropagation();
					this.props.dispatch(upCompSurface(this.props.activePageId,compId,{y:y+1}));
					this.setSelectCompPos(x,y+1);
					return false;
				default:
					return true;
			}
		}.bind(this);
  	}

  	setSelectCompPos(x,y){//设置选中框位置
  		const surface=this.state.selComp.get('surface');
  		const newSurface=surface.merge(Immutable.Map({x:x,y:y}));
		const newSelComp=this.state.selComp.set('surface',newSurface);
		this.setSelectComp(newSelComp);
  	}

	//新增一个page
	addNewPage(){
		//获取当前页面的pageNum
		const pageNum=this.props.pageDatas.get(this.props.activePageId).get('pageNum');
		const newPageNum=pageNum+1;
		this.props.dispatch(addNewPage(newPageNum));
	}
	//单击选中页面
	pageClick(pageId){
		//activePageId:pageId,
		this.setState({selComp:Map(),selectStyle:{display:'none'}});
		this.props.dispatch(clickLeftPage(pageId));
	}
	//设置选中框
	setSelectComp(comp){
		const surface=comp.get('surface');
		this.setState({
			selComp:comp,
			selectStyle:{
				display:'block',
				left: surface.get('x')+'px',
				width: surface.get('width')+'px',
				height: surface.get('height')+'px',
				top: surface.get('y')+'px',
				transform:'rotate('+surface.get('rotate')+'deg)'
			}
		});
	}
	//拉动过程中设置选中框位置和宽高
	setSelectCompStyle(x,y,width,height){
		const selectStyle=this.state.selectStyle;
		const newStyle=Object.assign({},selectStyle,{left:x,top:y,width:width,height:height});
		this.setState({selectStyle:newStyle});
	}

	//隐藏选中框
	hiddenSelComp(){
		this.setState({selComp:Map(),selectStyle:{display:'none'}});
	}

	render(){
		const pageId=this.props.activePageId;
		const leftProps={
			activePage:pageId,//当前页面id
			selComp:this.state.selComp,//当前选中的组件
			onPageClick:this.pageClick.bind(this),//单击选中页面
			newPageClick:this.addNewPage.bind(this),//新增页面
			setSelectComp:this.setSelectComp.bind(this), //设定选中框
			hiddenSelComp:this.hiddenSelComp.bind(this), //隐藏选择框
		}
		const middleProps={
			pageId:pageId,
			selComp:this.state.selComp,
			selectStyle:this.state.selectStyle,
			hiddenSelComp:this.hiddenSelComp.bind(this), //隐藏选择框
			setSelectComp:this.setSelectComp.bind(this), //设定选中框
			setSelectCompStyle:this.setSelectCompStyle.bind(this)
		}
		const rightProps={
			pageId:pageId,
			selComp:this.state.selComp,
			setSelectComp:this.setSelectComp.bind(this) //设定选中框
		}

		return (
			<div>
				<section className="edit-main">
					{/*左侧页面选择和控件布局*/}
					<LeftTabs {...leftProps} />
					{/*主编辑区域*/}
					<section className="edit-zone">
						{/*中间主编辑区域*/}
						<MiddleEditZone {...middleProps}  style={{zIndex:999}}/> 
		  				{/*右侧控制面板区域*/}
		  				<RightTabs {...rightProps} />
	  				</section>
	  			</section>
	  		</div>
		);
	}
}

export default connect(state=>{
	let firstPageId='';
	if(state.app.h5Reducer.activePageId){
		firstPageId=state.app.h5Reducer.activePageId;
	}else{
		state.app.h5Reducer.data.pages.forEach(function (item) {
	  		if(item && item.get('pageNum')==1){
	  			firstPageId=item.get('id');
	  		}
		});
	}
	
	return{
		uniqueCode:state.app.h5Reducer.uniqueCode,
		pageDatas:state.app.h5Reducer.data.pages,
		activePageId:firstPageId,
		saveDatas:state.app.h5Reducer
	}
})(H5Edit);